<template>
  <div v-show="show" @click="close()">
    <div class="emotion-box" :style="{ left: x + 'px', top: y + 'px' }">
      <el-scrollbar style="height: 220px">
        <div class="emotion-items">
          <div
            class="emotion-item"
            v-for="(emoText, i) in emotion.emoTextList"
            :key="i"
            @click="onClickEmo(emoText)"
            v-html="emotion.textToImg(emoText, 'emoji-large')"
          ></div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import emotion from "@/utils/emotion";
const pos = ref({
  x: 0,
  y: 0,
});
const x = computed(() => {
  return pos.value.x - 22;
});
const y = computed(() => {
  return pos.value.y - 234;
});
const emits = defineEmits(["onClickEmotion"]);
const show = ref(false);
function onClickEmo(emoText: any) {
  let emotion = `#${emoText};`;
  emits("onClickEmotion", emotion);
}
function open(pos: any) {
  pos.value = pos;
  show.value = true;
}
function close() {
  show.value = false;
}
defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">
.emotion-box {
  position: fixed;
  width: 372px;
  box-sizing: border-box;
  padding: 5px;
  background-color: #fff;
  box-shadow: var(--im-box-shadow);

  .emotion-items {
    display: flex;
    flex-wrap: wrap;

    .emotion-item {
      text-align: center;
      cursor: pointer;
      padding: 2px;
    }
  }
}
</style>
